class ControlPanel {
  constructor(socket, nav2d) {
      this.socket = socket;
      this.nav2d = nav2d;
      
      // 初始化UI元素
      this.velocitySlider = document.getElementById('velocity-slider');
      this.angularSlider = document.getElementById('angular-slider');
      this.emergencyStopBtn = document.getElementById('emergency-stop');
      this.navigationModeSelect = document.getElementById('navigation-mode');
      this.localizeBtn = document.getElementById('localize-btn');
      this.navigateBtn = document.getElementById('navigate-btn');
      this.clearWaypointsBtn = document.getElementById('clear-waypoints-btn');
      this.executeWaypointsBtn = document.getElementById('execute-waypoints-btn');
      
      // 初始化事件
      this.initEventListeners();
  }
  
  initEventListeners() {
      // 速度控制
      this.velocitySlider.addEventListener('input', (e) => {
          const angular = parseFloat(this.angularSlider.value);
          this.sendVelocityCommand(parseFloat(e.target.value), angular);
      });
      
      this.angularSlider.addEventListener('input', (e) => {
          const linear = parseFloat(this.velocitySlider.value);
          this.sendVelocityCommand(linear, parseFloat(e.target.value));
      });
      
      // 急停按钮
      this.emergencyStopBtn.addEventListener('click', () => {
          this.sendVelocityCommand(0, 0);
          this.velocitySlider.value = 0;
          this.angularSlider.value = 0;
          this.socket.emit('cancel_navigation');
      });
      
      // 定位按钮
      this.localizeBtn.addEventListener('click', () => {
          this.showInitialPoseDialog();
      });
      
      // 导航按钮
      this.navigateBtn.addEventListener('click', () => {
          const x = parseFloat(document.getElementById('goal-x').value);
          const y = parseFloat(document.getElementById('goal-y').value);
          const theta = parseFloat(document.getElementById('goal-theta').value);
          
          if (!isNaN(x) && !isNaN(y)) {
              this.socket.emit('navigate_to', { x, y, theta });
          }
      });
      
      // 航点控制
      this.clearWaypointsBtn.addEventListener('click', () => {
          this.nav2d.clearWaypoints();
      });
      
      this.executeWaypointsBtn.addEventListener('click', () => {
          this.nav2d.executeWaypoints();
      });
      
      // 导航模式切换
      this.navigationModeSelect.addEventListener('change', (e) => {
          this.socket.emit('set_navigation_mode', { mode: e.target.value });
      });
  }
  
  sendVelocityCommand(linear, angular) {
      // 应用死区处理
      const deadZone = 0.05;
      if (Math.abs(linear) < deadZone) linear = 0;
      if (Math.abs(angular) < deadZone) angular = 0;
      
      this.socket.emit('velocity_command', {
          linear: linear,
          angular: angular
      });
  }
  
  showInitialPoseDialog() {
      if (this.nav2d.robotPose) {
          document.getElementById('initial-pose-x').value = this.nav2d.robotPose.x.toFixed(2);
          document.getElementById('initial-pose-y').value = this.nav2d.robotPose.y.toFixed(2);
          document.getElementById('initial-pose-theta').value = this.nav2d.robotPose.theta.toFixed(2);
      }
      
      const modal = new bootstrap.Modal(document.getElementById('initialPoseModal'));
      modal.show();
      
      document.getElementById('confirm-initial-pose').onclick = () => {
          const x = parseFloat(document.getElementById('initial-pose-x').value);
          const y = parseFloat(document.getElementById('initial-pose-y').value);
          const theta = parseFloat(document.getElementById('initial-pose-theta').value);
          
          if (!isNaN(x) && !isNaN(y) && !isNaN(theta)) {
              this.socket.emit('set_initial_pose', { x, y, theta });
              modal.hide();
          }
      };
  }
  
  updateRobotStatus(pose) {
      document.getElementById('robot-position').textContent = 
          `X: ${pose.x.toFixed(2)}, Y: ${pose.y.toFixed(2)}`;
      document.getElementById('robot-orientation').textContent = 
          `${(pose.theta * 180/Math.PI).toFixed(1)}°`;
      document.getElementById('robot-velocity').textContent = 
          `Linear: ${pose.linear_velocity.toFixed(2)}, Angular: ${pose.angular_velocity.toFixed(2)}`;
  }
}